import React, { forwardRef, useRef, useState,useImperativeHandle } from 'react'

const ChildComponent = forwardRef((props, ref)=>{
    const inputRef = useRef()
    const [count,setCount] = useState(0)

    // 暴露给父组件的方法
    useImperativeHandle(ref,()=>({
        focus: ()=>{
            inputRef.current?.focus();
        },
        increment:()=>{
            setCount(prev => prev + 1)
        },
        getCount: () => count
    }))


    return (
        <div>
            <input ref={inputRef} placeholder="子组件输入框" />
            <p>count: { count }</p>
        </div>
    )
})

export default ChildComponent